<!DOCTYPE html>
<html lang="en">

<head>
    @@include('meta.html')
    <title>场外交易</title>
</head>
<style>
    body.hidden {
        min-width: 1400px;
        overflow-x: auto
    }
</style>

<body class="hidden">
    @@include('header.html')
    <div class="y-main-content">
        <div class="y-location clearfix">
            <div class="left clearfix">
                <span class="left first-location">场外交易</span>
                <img src="images/icon/next.png" alt="" class="left location-ico">
                <span class="left on-location">购买BITCNY</span>
            </div>
            <div class="right y-explain">
                说明：场外交易是指平台用户与平台承兑商之间的交易，由平台做外担保以及撮合，平台自身不参与任何场外交易行为；
            </div>
        </div>
        <div class="clearfix hidden">
            @@include('club-exchange.html')
            <div class="y-content-r">
                <div class="y-location-r">
                    购买BITCNY
                </div>
                <div class="y-main-content-r">
                    <div class="y-scroll-height">
                        <div class="clearfix y-table-th border-b">
                            <div class="width20p fl text-c clearfix">
                                <div class="inline-b">
                                    <span class="fl y-table-text">承兑商昵称</span>
                                    <div class="fl y-searchCoins">
                                        <input type="text" placeholder="搜索" value="" class="fl y-input y-search-input">
                                        <img src="images/icon/y-search.png" alt="" class="y-searchBar">
                                    </div>
                                </div>
                            </div>
                            <div class="width20p fl text-c y-table-text">
                                <div class="pointer">
                                    限额
                                    <img src="images/icon/tableIco1.png" class="y-sortIcon" alt="">
                                </div>
                            </div>
                            <div class="width20p fl text-c y-table-text">
                                <div class="pointer">
                                    单价
                                    <img src="images/icon/tableIco1.png" class="y-sortIcon" alt="">
                                </div>
                            </div>
                            <div class="width20p fl text-c y-table-text">
                                <div class="y-filterList">
                                    <select class="y-select-box">
                                                <option class="y-option" value="1" selected>支付方式</option>
                                                <option class="y-option" value="2">全部</option>
                                                <option class="y-option" value="3">微信</option>
                                                <option class="y-option" value="4">支付宝</option>
                                                <option class="y-option" value="4">银行卡</option>
                                            </select>
                                    <div class="y-replace y-replace-width">
                                        <span class="y-current current-height">支付方式</span>
                                        <ul class="y-options options-width">
                                            <li rel="1">支付方式</li>
                                            <li rel="2">全部</li>
                                            <li rel="3">微信</li>
                                            <li rel="4">支付宝</li>
                                            <li rel="4">银行卡</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="width20p fl text-c y-table-text">
                                操作
                            </div>
                        </div>

                        <ul class="trade-ul">
                            <li class="clearfix trade-li border-b">
                                <div class="clearfix fl width20p">
                                    <span class="fl y-headerName">炒</span>
                                    <div class="fl ml10">
                                        <p class="y-trade-person">炒币小王子</p>
                                        <p class="y-trade-code">5238</p>
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-cny-text">1000 BINTCNY</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-trade-price">&yen;&nbsp;0.99/个</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <div class="inline-b">
                                        <img src="images/icon/wechat.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/alipay.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/bank.png" class="plr5 mt10" alt="">
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <button class="y-btn y-primary-btn mt15">立即购买</button>
                                </div>
                                <!-- 购买 -->
                                <div class="clearfix trade-buy none">
                                    <span class="fl y-buy-headerName">炒</span>
                                    <div class="fl ml10 width35p">
                                        <p class="y-trade-person">
                                            炒币小王子(成交单数：35627)&emsp;&emsp;单价：
                                            <span class="y-price">&yen; 0.99/个</span>
                                        </p>
                                        <p class="y-trade-limitPrice">限额10000 BITCNY</p>
                                        <div class="y-trade-ways">
                                            <span class="y-trade-way">
                                                <img src="images/icon/wechat.png" class="plr5" alt=""> 微信
                                            </span>
                                            <span class="y-trade-way">
                                                <img src="images/icon/alipay.png" class="plr5" alt=""> 支付宝
                                            </span>
                                            <span class="y-trade-way">
                                                <img src="images/icon/bank.png" class="plr5" alt=""> 银行卡
                                            </span>
                                        </div>
                                    </div>
                                    <div class="fr">
                                        <div class="clearfix">
                                            <div class="fl clearfix">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">&yen;</span>
                                                    </div>

                                                </div>
                                                <img src="images/icon/changeIco.png" class="fl y-trade-chageIco" alt="">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">BITCNY</span>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="fl y-trade-btns">
                                                <button class="y-btn y-lilace-btn y-orderPop-show">下单</button>
                                                <button class="y-btn y-transparent-btn y-cancelPop-show">取消</button>
                                            </div>
                                        </div>
                                        <p class="y-trade-tip">请在下单后15分钟内付款，否则将视为自动放弃订单</p>
                                    </div>
                                </div>
                            </li>
                            <li class="clearfix trade-li border-b">
                                <div class="clearfix fl width20p">
                                    <span class="fl y-headerName">奋</span>
                                    <div class="fl ml10">
                                        <p class="y-trade-person">奋斗</p>
                                        <p class="y-trade-code">5238</p>
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-cny-text">1000 BINTCNY</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-trade-price">&yen;&nbsp;0.99/个</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <div class="inline-b">
                                        <img src="images/icon/wechat.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/alipay.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/bank.png" class="plr5 mt10" alt="">
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <button class="y-btn y-primary-btn mt15">立即购买</button>
                                </div>
                                <div class="clearfix trade-buy">
                                    <span class="fl y-buy-headerName">奋</span>
                                    <div class="fl ml10 width35p">
                                        <p class="y-trade-person">
                                            奋斗(成交单数：35627)&emsp;&emsp;单价：
                                            <span class="y-price">&yen; 0.99/个</span>
                                        </p>
                                        <p class="y-trade-limitPrice">限额10000 BITCNY</p>
                                        <div class="y-trade-ways">
                                            <span class="y-trade-way">
                                                <img src="images/icon/wechat.png" class="plr5" alt=""> 微信
                                            </span>
                                            <span class="y-trade-way">
                                                <img src="images/icon/alipay.png" class="plr5" alt=""> 支付宝
                                            </span>
                                            <span class="y-trade-way">
                                                <img src="images/icon/bank.png" class="plr5" alt=""> 银行卡
                                            </span>
                                        </div>
                                    </div>
                                    <div class="fr  mr20">
                                        <div class="clearfix">
                                            <div class="fl clearfix">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">&yen;</span>
                                                    </div>

                                                </div>
                                                <img src="images/icon/changeIco.png" class="fl y-trade-chageIco" alt="">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">BITCNY</span>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="fl y-trade-btns">
                                                <button class="y-btn y-lilace-btn y-orderPop-show">下单</button>
                                                <button class="y-btn y-transparent-btn y-cancelPop-show">取消</button>
                                            </div>
                                        </div>
                                        <p class="y-trade-tip">请在下单后15分钟内付款，否则将视为自动放弃订单</p>
                                    </div>
                                </div>
                            </li>
                            <li class="clearfix trade-li border-b">
                                <div class="clearfix fl width20p">
                                    <span class="fl y-headerName">L</span>
                                    <div class="fl ml10">
                                        <p class="y-trade-person">Lan</p>
                                        <p class="y-trade-code">5238</p>
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-cny-text">1000 BINTCNY</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-trade-price">&yen;&nbsp;0.99/个</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <div class="inline-b">
                                        <img src="images/icon/wechat.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/alipay.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/bank.png" class="plr5 mt10" alt="">
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <button class="y-btn y-primary-btn mt15">立即购买</button>
                                </div>
                                <div class="clearfix trade-buy none">
                                    <span class="fl y-buy-headerName">炒</span>
                                    <div class="fl ml10 width35p">
                                        <p class="y-trade-person">
                                            炒币小王子(成交单数：35627)&emsp;&emsp;单价：
                                            <span class="y-price">&yen; 0.99/个</span>
                                        </p>
                                        <p class="y-trade-limitPrice">限额10000 BITCNY</p>
                                        <div class="y-trade-ways">
                                            <span class="y-trade-way">
                                                <img src="images/icon/wechat.png" class="plr5" alt=""> 微信
                                            </span>
                                            <span class="y-trade-way">
                                                <img src="images/icon/alipay.png" class="plr5" alt=""> 支付宝
                                            </span>
                                            <span class="y-trade-way">
                                                <img src="images/icon/bank.png" class="plr5" alt=""> 银行卡
                                            </span>
                                        </div>
                                    </div>
                                    <div class="fr">
                                        <div class="clearfix">
                                            <div class="fl clearfix">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">&yen;</span>
                                                    </div>

                                                </div>
                                                <img src="images/icon/changeIco.png" class="fl y-trade-chageIco" alt="">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">BITCNY</span>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="fl y-trade-btns">
                                                <button class="y-btn y-lilace-btn y-orderPop-show">下单</button>
                                                <button class="y-btn y-transparent-btn y-cancelPop-show">取消</button>
                                            </div>
                                        </div>
                                        <p class="y-trade-tip">请在下单后15分钟内付款，否则将视为自动放弃订单</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 下单 -->
    <div class="y-popBox y-order-pop none">
        <div class="popbg"></div>
        <div class="pop_box no-padding">
            <div class="y-pop-order">
                <div class="y-pop-location clearfix">
                    <span class="fl">付款订单</span>
                    <span class="fr fs18">您已成功下单，请及时付款;</span>
                </div>
                <div class="plr30 ptb10 border-b">
                    <div class="clearfix">
                        <span class="fl fs20">请核对订单信息：</span>
                        <span class="fr fs20">
                            交易总额：
                            <span class="y-price fs24">&yen; 3075.59</span>
                        </span>
                    </div>
                    <div class="clearfix fs18 mt10">
                        <span class="fl">订单类型：购买BITCNY</span>
                        <span class="fl ml60">
                            交易单价：
                            <span class="y-price">&yen; 1.00/个</span>
                        </span>
                        <span class="fr">交易数量：1000</span>
                    </div>
                </div>
                <div class="y-popOrder-pay">
                    <div class="clearfix">
                        <!-- 隐藏input,value为当前选中的支付方式 -->
                        <input class="none j-selected-pay" type="text" value="wechat">
                        <div class="fl" id="y-current-pay" ref="wechat">
                            <img src="images/icon/wechat.png" class="y-popPay-ico" alt="">
                            <span class="y-pay-text">微信支付</span>
                        </div>
                        <div class="fr pointer y-change-pay">
                            <span class="fs18">切换方式</span>
                            <img src="images/icon/next.png" class="y-popPay-nextIco" alt="">
                        </div>
                    </div>
                    <div class="y-pop-otherPay none">
                        <div class="mt10 pointer y-select-pay" ref="wechat">
                            <img src="images/icon/wechat.png" class="y-popPay-ico" alt="">
                            <span class="y-pay-text">微信支付</span>
                        </div>
                        <div class="mt10 pointer y-select-pay" ref="alipay">
                            <img src="images/icon/alipay.png" class="y-popPay-ico" alt="">
                            <span class="y-pay-text">支付宝支付</span>
                        </div>
                        <div class="mt10 pointer y-select-pay" ref="bank">
                            <img src="images/icon/bank.png" class="y-popPay-ico" alt="">
                            <span class="y-pay-text">银行卡支付</span>
                        </div>
                    </div>
                </div>
                <!-- 微信支付 -->
                <div class="fs20 plr30 pb20 border-b y-way-data" id="wechat">
                    <div class="clearfix mt20">
                        <span class="fl">收款人</span>
                        <span class="fr">一只区块链小白</span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">微信账号</span>
                        <span class="fr">qklxb123456</span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">收款二维码</span>
                        <span class="fr">
                            <img src="images/icon/qrcode.png" class="y-popData-ico" alt="" srcset="">
                        </span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">
                            备注
                            <span class="y-pop-remark">（转账时必填备注号）</span>
                        </span>
                        <span class="fr">
                            32196391的骄傲回到
                            <img src="images/icon/remark.png" class="y-popData-ico" alt="" srcset="">
                        </span>
                    </div>
                </div>
                <!-- 支付宝支付 -->
                <div class="fs20 plr30 pb20 border-b y-way-data none" id="alipay">
                    <div class="clearfix mt20">
                        <span class="fl">收款人</span>
                        <span class="fr">一只区块链小白</span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">支付宝账号</span>
                        <span class="fr">qklxb123456</span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">收款二维码</span>
                        <span class="fr">
                            <img src="images/icon/qrcode.png" class="y-popData-ico" alt="" srcset="">
                        </span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">
                            备注
                            <span class="y-pop-remark">（转账时必填备注号）</span>
                        </span>
                        <span class="fr">
                            32196391的骄傲回到
                            <img src="images/icon/remark.png" class="y-popData-ico" alt="" srcset="">
                        </span>
                    </div>
                </div>
                <!-- 银行卡支付 -->
                <div class="fs20 plr30 pb20 border-b y-way-data none" id="bank">
                    <div class="clearfix mt20">
                        <span class="fl">银行信息</span>
                        <span class="fr">招商银行&emsp;&emsp;广东省深圳市南山支行</span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">收款人</span>
                        <span class="fr">一只区块链小白</span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">银行卡号</span>
                        <span class="fr">
                            128938193913966875
                            <img src="images/icon/remark.png" class="y-popData-ico" alt="" srcset="">
                        </span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">
                            备注
                            <span class="y-pop-remark">（转账时必填备注号）</span>
                        </span>
                        <span class="fr">
                            32196391的骄傲回到
                            <img src="images/icon/remark.png" class="y-popData-ico" alt="" srcset="">
                        </span>
                    </div>
                </div>
                <div class="f18 text-l mt20 plr30">
                    温馨提示：请按要求输入“备注”号码，否则无法到账！如您已向卖家转账付款，请务必点击右下角“我已付款”按钮，否则有可能造成资金损失。
                </div>
            </div>
            <div class="clearfix pop_button">
                <div class="fl">
                    <button class="y-btn y-popCancel-btn y-plain-btn y-md-btn">取消</button>
                </div>
                <div class="fr text-r">
                    <button class="y-btn y-lilace-btn y-plain-btn y-md-btn" onclick="hasPay()">
                        <span>我已付款</span>
                        <img src="images/icon/time.png" class="y-restTime-ico" alt="">
                        <span class="fs18">剩余14分36秒</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 订单完成 -->
    <div class="y-popBox y-finished-pop none">
        <div class="popbg"></div>
        <div class="pop_box">
            <p class="pop_text">订单已完成！</p>
            <div class="pop_desc">
                <span class="db line15">您可前往订单中心查看订单详情！若长时间未到账请及时联系承兑客服协调处理
            </span>
            </div>
            <div class="clearfix pop_button">
                <div class="fl width50p">
                    <button class="y-btn y-lilace-btn y-plain-btn y-md-btn">立即查看</button>
                </div>
                <div class="fl width50p">
                    <button class="y-btn y-popCancel-btn y-plain-btn y-md-btn">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 取消订单 -->
    <div class="y-popBox y-cancelOrder-pop none">
        <div class="popbg"></div>
        <div class="pop_box">
            <p class="pop_text">取消订单</p>
            <div class="border-b fs20 pb20">
                <p class="y-tips-text">若您已付款，请勿取消订单，否则会造成资金损失！</p>
                <p>取消规则：每日累计取消3次订单的用户，</p>
                <p>将会被限制当日的购买功能</p>
            </div>
            <div class="ptb20 fs20 border-b">
                <label class="pointer" for="pay-or-not">
                    <input type="checkbox" id="pay-or-not" class="y-pay-checkobox" onchange="payOrNot(this)">
                    <i class="y-checkbox y-check"></i>
                    <i class="y-checkbox y-checked none"></i>
                    <span>暂未付款</span>
                </label>
            </div>
            <div class="clearfix pop_button">
                <div class="fl width50p">
                    <button class="y-btn y-lilace-btn y-plain-btn y-md-btn">我再想想</button>
                </div>
                <div class="fl width50p">
                    <button class="y-btn y-popCancel-btn y-plain-btn y-md-btn">确定取消</button>
                </div>
            </div>
        </div>
    </div>
    @@include('footer-js.html')
    <script type="text/javascript">
        // 加载列表头像颜色
        $(document).ready(function() {
            var colorArray = ["#fa6e0a", "#0b987b", "#bf1b34", "#0283bb", "#1a67b7", "#0b987b", "#0283bb"];
            var headerArr = $('.y-headerName');
            $.each(headerArr, function(index, value) {
                $('.y-headerName').eq(index).css("background-color", colorArray[index % 7]);
                $('.y-headerName').eq(index).parent().parent('.trade-li').find(".y-buy-headerName").css(
                    "background-color", colorArray[index % 7]);
            });
            // 选择支付方式
            $('.y-change-pay').click(function() {
                $('.y-pop-otherPay').toggleClass('none');
                $('.y-select-pay').show();
                var selected = $('.j-selected-pay').val();
                $.each($('.y-select-pay'), function(index, value) {
                    if ($(this).attr('ref') == selected) {
                        $(this).hide();
                    }
                })
            });
            $('.y-select-pay').click(function() {
                var ref = $(this).attr('ref'); // 当前选择的支付方式
                $('.j-selected-pay').val(ref);
                var src = $(this).children('.y-popPay-ico').attr('src');
                var payText = $(this).children('.y-pay-text').text();
                $('#y-current-pay .y-popPay-ico').attr('src', src);
                $('#y-current-pay .y-pay-text').text(payText);
                $('.y-pop-otherPay').addClass('none');
                $('.y-way-data').addClass('none');
                $('#' + ref).removeClass('none');
                console.log($('.j-selected-pay').val());
            });
            // 下单
            $('.y-orderPop-show').click(function() {
                    $('.y-order-pop').removeClass('none');
                })
                // 取消订单
            $('.y-cancelPop-show').click(function() {
                $('.y-cancelOrder-pop').removeClass('none');
            })
        });

        function hasPay() {
            $('.y-order-pop').addClass('none');
            $('.y-finished-pop').removeClass('none');
        }

        function payOrNot(e) {
            if ($(e).is(':checked')) {
                $('.y-checked').removeClass('none');
                $('.y-check').addClass('none');
            } else {
                $('.y-checked').addClass('none');
                $('.y-check').removeClass('none');
            }
            console.log($(e).is(':checked'));
        }
    </script>
</body>

</html>